<template>
  <view class="tradeOrder">
    <!-- 头部 -->
		<view class="header_bar header_fixed header_main">
			<view class="header">
				<view class="header-goBack" @tap.stop="$tools.switchTab('./trade')"></view>
				<view class="header-title">交易订单</view>
			</view> 
    </view> 
    <view class="tabsBox">
      <view class="tabbar-list">
        <view class="tabbar-item" v-for="(item,index) in typeList" :key="index">
          <view class="tabbar-title" :class="[tabActive == index? 'tabbar-title--active' : ''] " @tap.stop="changeTypeList(index,item)">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="tradeOrder-list" v-if="isShowPage">
      <view class="tradeOrder-list_item" v-for="(item,index) in list" :key="index">
        <view class="flex mt-0">
          <view class="txt">{{item.configName}}</view>
          <view class="btn" :class="item.status<2?'btn-red':'btn-gray'">{{getStatus(item.status)}}</view>
        </view>
        <view class="flexLeft"  v-if="item.status==1 || item.status!=0" :class="item.status!=0?'mt-10':''">
          <view class="num mr-10" v-if="item.status==1">锁定天数：{{ item.daysProfit > item.days ?item.days:item.daysProfit }} / {{ item.days }}</view>
         <view class="num" v-if="item.status!=0">累计收益：{{ item.amountProfit }}</view>
          <!-- <view class="num">剩余天数：{{ item.days - item.daysProfit >0 ?item.days - item.daysProfit:0 }} </view> -->
        </view>
        <view class="flex">
          <view class="flexLeft">
            <view class="day">服务费：{{ item.amountService }} QFB积分</view>
            <view class="day ml-10">日息：{{ item.profitRadio * 100 }} %</view>
          </view>
          <view class="btn" v-if="item.status==1 && item.daysProfit >= item.days" @tap.stop="hangingSale(item.id)">挂卖</view>
        </view>
        <view class="flex">
          <view class="num">支付积分：{{item.amount}}</view>
          <view class="btn" @tap.stop="$tools.jump('./tradeDetail',item.id,item.status)">查看明细</view>
        </view>
        <view class="flex" v-if="item.status==1">
          <view class="num">锁定时间：{{ item.updateTime }}</view>
          <view class="btn" v-if="item.status==1 && item.daysProfit >= item.days" @tap.stop="hangingSaleAgain(item.id)">重消</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      isShowPage:true,
      pages:1,
      pageSize:10,
      pageIndex:1,
      status:'',
      typeList:[
        {name: '全部',status:''},
        {name: '预约中',status:0},
        {name: '锁定中',status:1},
        {name: '挂卖中',status:2},
        {name: '已完成',status:3},
      ],
      tabActive:0,
      list:[
        {id:1,name:'贫困区',status:1,fee:10,pay:510},
        {id:2,name:'贫困区',status:2,fee:10,pay:510},
        {id:3,name:'贫困区',status:3,fee:10,pay:510},
        {id:4,name:'贫困区',status:4,fee:10,pay:510},
        {id:5,name:'贫困区',status:5,fee:10,pay:510},
        {id:6,name:'贫困区',status:6,fee:10,pay:510},
      ],
    };
  },
  computed:{
    getName(){
      return function(type){
        switch (type){
          case 1:
            return '特困区';
          case 2:
            return '贫困区';
          case 4:
            return '小康区';  
          case 5:
            return '贫困区'; 
          case 3:
            return '富人区';   
        }
      }
    },
    getStatus(){
      return function(type){
        switch (type){
          case 0:
            return '预约中';
            break;
          case 1:
            return '锁定中';
          case 2:
            return '挂卖中';
          case 3:
            return '已成交';   
          case 4:
            return '已取消';  
          case 5:
            return '预约失败'; 
         
        }
      }
    },
  },
  onLoad(options) {
    this.init()
  },
  // 下拉刷新
	onPullDownRefresh() {
			this.init();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 500);
	},
  onReachBottom() {
    console.log("ddd");
    if (this.pageIndex >= this.pages) {
      return this.$tools.toast('到底了');
    } else {
      this.pageIndex++;
      console.log("+++")
      this.getRecord();
    }
  },
  methods: {
    init(){
				this.isShowPage = false;
				this.pageSize = 10;
				this.pageIndex = 1;
        this.pages=1
				this.list = [];
				this.getRecord();
			},
			// 记录
			getRecord(){
				var data = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
          status:this.status
				};
				console.log("data：",data);
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/api/mate/mateOrder',data, res => {
						if(res.code == 200){
							this.isShowPage = true;
							this.pages = res.data.pages;
							this.list = this.list.concat(res.data.list);
							uni.hideLoading();
						}
					}, err => {
						uni.hideLoading();
					}, 'GET'
				);
			},
      hangingSale(id){
      console.log(id)
      const that = this
				uni.showModal({
				title: '提示',
				content: '确定挂卖？',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
						var data = {
              id:id,
            };
						console.log("data：",data);
						that.$Ajax('/api/mate/hangingSale',
						data,
						res => {
								if (res.code == 200) {
									that.$tools.toast("确认挂卖成功");
									that.isShowPage = false;
									that.pages = 1;
									that.pageIndex = 1;
									that.list = [];
									that.getRecord();
								}
							}
						),err =>{
						}
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
      },
      hangingSaleAgain(id){
      console.log(id)
      const that = this
				uni.showModal({
				title: '提示',
				content: '确定重消？',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
						var data = {
              id:id,
            };
						console.log("data：",data);
						that.$Ajax('/api/mate/cancelAgain',
						data,
						res => {
								if (res.code == 200) {
									that.$tools.toast("确认挂卖成功");
									that.isShowPage = false;
									that.pages = 1;
									that.pageIndex = 1;
									that.list = [];
									that.getRecord();
								}
							}
						),err =>{
						}
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
      },
      changeTypeList(index,item) {
				if(this.tabActive != index){
					this.tabActive = index
					this.status = item.status
					this.init();
				}
			},
  },
};
</script>

<style lang="scss" scoped>
.tradeOrder{
  overflow: hidden;
  padding-bottom: 24rpx;
  .tabsBox{
    background: #fff;
  }
  &-list{
    &_item{
      width: 91.4%;
      margin: auto;
      margin-top: 24rpx;
      background: #fff;
      border-radius: 16rpx;
      padding: 32rpx 24rpx;
      font-size: 28rpx;
      color: #333333;
      .txt{
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
      }
      .day{
        margin-top: 16rpx;
        // width: 170rpx;
        padding: 0 20rpx;
        text-align: center;
        height: 48rpx;
        line-height:48rpx ;
        background: #F3F3F3;
        border-radius: 1998rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #666666;
        .num{
            font-weight: 500;
            font-size: 34rpx;
            color: #000000;
          }
      }
      .flexLeft{
        @include flexLeft;
      }
      .ml-10{
        margin-left: 20rpx;
      }
      .mt-10{
        margin-top: 22rpx;
      }
      .mr-10{
        margin-right: 20rpx;
      }
      .mt-0{
        margin-top: 0 !important;
      }
      .flex{
          @include flexBetween;
          margin-top: 22rpx;
          .btn{
            // width: 138rpx;
            padding: 0 20rpx;
            text-align: center;
            height: 60rpx;
            line-height:60rpx;
            font-weight: 500;
            font-size: 24rpx;
            border-radius: 16rpx;
            color: #FFFFFF;
            background:linear-gradient( 180deg, #FA6A45 0%, #F94123 100%) ;
          }
          .btn-red{
            background:#EE3A33;
          }
          .btn-gray{
            background: #999;
          }
        }
    }
  }
  .red{
    color: #FA6A45 ;
  }
}
</style>
